<template>
	<view>
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
			<swiper class="carousel" style="height: 350upx;" @change="swiperChange" autoplay="true" interval="3000" duration="300" circular="true">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @tap="navToDetailPage({ title: '轮播广告' })">
					<image :src="item.src" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 10个广告位 -->
		<view class="carousel-section">
			<view class="tuijian-s-section" >
				<view v-for="(item, index) in gungaoList" :key="index" class="tuijian-s-item" @tap="navToDetailPage(item)">
					<view class="image-wrapper"><image :src="item.src"></image><view class="info">{{item.type}}</view></view>
				</view>
			</view>
		</view>
		<!-- 分类详情 -->
		<!-- 菜单 (悬浮,预先隐藏)-->
		<al-type-scroll-tabs v-if="isShowSticky" v-model="tabIndex" :fixed="true" :tabs="tabs"></al-type-scroll-tabs>
		<view id="tabInList"><al-type-scroll-tabs v-model="tabIndex" :tabs="tabs"></al-type-scroll-tabs></view>
		<swiper :current="tabIndex" :style="{ height: height }" :duration="300" @change="ontabchange">
			<swiper-item v-for="(tabsItem, tindex) in tabs" :key="tabsItem.id"><al-swiper-goods :i="tindex" :index="tabIndex" :tabs="tabs"></al-swiper-goods></swiper-item>
		</swiper>
	</view>
</template>

<script>
import AlSwiperGoods from '@/components/al-swiper-goods.vue';
import AlTypeScrollTabs from '@/components/al-type-scroll-tabs.vue';
export default {
	components: {
		AlTypeScrollTabs,
		AlSwiperGoods
	},
	data() {
		return {
			titleNViewBackground: '',
			swiperCurrent: 0,
			swiperLength: 0,
			carouselList: [],
			gungaoList: [],

			height: '600px', // 需要固定swiper的高度
			tabs: [
				{ name: '精选', id: 'jingxuan', goods: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '家具日用', id: 'cainixihuan', goods: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '食品饮料', id: 'jujiabaihuo', goods: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '母婴', id: 'muying', goods: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '女装', id: 'nvzhuang', goods: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '美食', id: 'meishi', goods: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '内衣', id: '内衣', goods: null, num: 1, y: 0, curPageLen: 0, hasNext: true }
			],
			tabIndex: 0, // 当前菜单下标
			navTop: null, // nav距离到顶部的距离 (如计算不准确,可直接写死某个值)
			isShowSticky: false // 是否悬浮
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData() {
			let carouselList = await this.$api.json('carouselJDList');
			this.titleNViewBackground = carouselList[0].background;
			this.swiperLength = carouselList.length;
			this.carouselList = carouselList;

			let gungaoList = await this.$api.json('gungaoJDList');
			this.gungaoList = gungaoList;

			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px';
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		},
		//滚动图切换修改背景色
		swiperGDChange(e) {
			const index = e.detail.current;
			this.titleGDViewBackground = this.gundongList[index].background;
		},
		//详情页
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.title;
			uni.navigateTo({
				url: `/pages/product/product?id=${id}`
			});
		},
		// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的navTop数值是最精确的)
		setNavTop() {
			let view = uni.createSelectorQuery().select('#tabInList');
			view.boundingClientRect(data => {
				this.navTop = data.top; // 到屏幕顶部的距离
				//console.log('tabInList基本信息 = ' + JSON.stringify(data), this.navTop);
			}).exec();
		},
		ontabchange(e) {
			let index = e.target.current || e.detail.current;
			this.tabIndex = index;
		}
	},
	onPageScroll(e) {
		if (!this.navTop) this.setNavTop();
		if (e.scrollTop >= this.navTop) {
			this.isShowSticky = true; // 显示悬浮菜单
		} else {
			this.isShowSticky = false; // 隐藏悬浮菜单
		}
	},
	// #ifndef MP
	// 标题栏input搜索框点击
	onNavigationBarSearchInputClicked: async function(e) {
		this.$api.msg('点击了搜索框');
	},
	//点击导航栏 buttons 时触发
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			uni.navigateTo({
				url: '../sou/main?type=1'
			})
		} else if (index === 1) {
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.hideTitleNViewButtonRedDot({
				index
			});
			// #endif
			uni.navigateTo({
				url: '/pages/notice/notice'
			});
		}
	}

	// #endif
};
</script>
